<style lang="less" scoped>

.imgs{
    overflow: hidden;
    .img-box{
        position: relative;
        margin: 10px;
        float: left;
        width: 375px;
        height: 160px;
        img{
            width: 100%;
            height: 100%;
        }
        .img-name{
            height: 32px;
            width: 100%;
            background: rgba(0, 0, 0, 0.329);
            position: absolute;
            bottom: 0px;
            text-align: center;
            line-height: 32px;
            color: rgb(255, 255, 255);
        }
        .imgc{
            position: absolute;
            right: 0px;
            background: rgba(0, 0, 0, 0.692);
            box-shadow: 0px 0px 0px #0000008a;
            color:aliceblue;
            width: 66px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            z-index: 2;
            opacity: 0;
            cursor:pointer;
        }
        .img-e{
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
            transition-delay:0.3s;
            top: 0px;
        }
        .img-d{
            transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
            transition-delay:0.3s;
            top: 42px;
        }
        .ivu-card-head-inner, .ivu-card-head p{
            height: auto;
            overflow: inherit;
        }
    }
    .img-box:hover{
        .imgc{
            // right: -66px;
            
            box-shadow: 4px 5px 12px #0000008a;
            opacity: 1;
        }
        .img-e{
            transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);
        }
        .img-d{
            transition: all 0.3s cubic-bezier(0.4, 0, 1, 1);
        }
        .imgc:hover{
            background: rgba(0, 0, 0, 0.863);
        }
    }
}
.imgm{
    width: 375px;
    height: 160px;
}
.line-chart-con{
    
}
.addimg{
    width: 375px;
    height: 160px;
    background: #eee;
    line-height: 120px;
    text-align: center;
    font-size: 140px;
    cursor:pointer;
    transition: all 0.4s ease;
    
}
.addimg:hover{
    color: #eee;
    background: rgb(146, 146, 146);
}
</style>

<template>
    <div class="help">
        <Row class="margin-top-10" :gutter="10">
            <Col :md="24" :lg="24">
                 <Card>
                    <p slot="title" class="card-title">
                        <Icon type="ios-pulse"></Icon>
                        {{this.$route.meta.title}}
                    </p>
                    <div class="line-chart-con">
                       <div class="imgs">
                           <div class="img-box"  v-for="(key,index) in data" :key="index">
                               <img :src="key.image_url" alt="">
                               <div class="img-name" v-if="key.link_url!==''">{{key.link_url}}</div>
                               <div class="imgc img-e" @click="edit(key,index)">修改</div>
                               <div class="imgc img-d" @click="delSlides(key,index)">删除</div>
                           </div>
                           <div class="img-box">
                               <div class="addimg" @click="addimg"><span>+</span></div>
                           </div>
                       </div>
                    </div>
                </Card>
            </Col>
        </Row>
        <Modal
            v-model="editmodal"
            title="编辑"
            width="408"
            @on-ok="editok"
            @on-cancel="editcancel">
            <!-- <textarea id="articleEditor"></textarea> -->
            
            <Form :model="formInline" :label-width="50">
                <FormItem label="标题：">
                    <Input placeholder="请输入标题" v-model="formInline.tit_name"></Input>
                </FormItem>
                <FormItem label="链接：">
                    <Input placeholder="请输入链接" v-model="formInline.link_url"></Input>
                </FormItem>
            </Form>
            <Upload
                multiple
                type="drag"
                :before-upload="handleUpload"
                action="//jsonplaceholder.typicode.com/posts/">
                <div style="padding: 0px 0;height: 158px;overflow: hidden;">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff;position: absolute;left: calc(50% - 26px);top: calc(50% - 26px);z-index: 2;"></Icon>
                    <img :src="thisfile" class="imgm" alt="">
                    <!-- <img :src="file" class="imgm" alt="" v-if="file!==null"> -->
                    <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file==null" >{{htmlurl(thisfile)}}</p>
                    <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file!==null" >{{file.name}}</p>
                </div>
            </Upload>
            <div style="text-align: center;color: #57a3f3;">图片尺寸375*160像素</div>
        </Modal>
        <Modal
            v-model="addmodal"
            title="添加"
            width="408"
            @on-ok="addok"
            @on-cancel="editcancel">
            <!-- <textarea id="articleEditor"></textarea> -->
            
            <Form :model="addformInline" :label-width="50">
                <FormItem label="标题：">
                    <Input placeholder="请输入标题" v-model="addformInline.tit_name"></Input>
                </FormItem>
                <FormItem label="链接：">
                    <Input placeholder="请输入链接" v-model="addformInline.link_url"></Input>
                </FormItem>
            </Form>
            <Upload
                multiple
                type="drag"
                :before-upload="handleUpload"
                action="//jsonplaceholder.typicode.com/posts/">
                <div style="padding: 0px 0;height: 158px;overflow: hidden;">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff;position: absolute;left: calc(50% - 26px);top: calc(50% - 26px);z-index: 2;"></Icon>
                    <img :src="thisfile" class="imgm" alt="">
                    <!-- <img :src="file" class="imgm" alt="" v-if="file!==null"> -->
                    <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file==null" >上传图片</p>
                    <p style="position: absolute;top: 0px;background: #000000b5;color: #fff;width: 100%;height: 100%;z-index: 1;line-height: 230px;" v-if="file!==null" >{{file.name}}</p>
                </div>
            </Upload>
            <div style="text-align: center;color: #57a3f3;">图片尺寸375*160像素</div>
        </Modal>
    </div>
</template>

<script>


export default {
    components: {
        
    },
    data () {
        return {
            data:[],
            editmodal:false,
            addmodal:false,
            file:null,
            thisfile:'',
            thisindex:'',
            formInline: {
                tit_name: '',
                link_url: ''
            },
            addformInline: {
                tit_name: '',
                link_url: '',
                description:''
            }
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.getSlides()
        },
        htmlurl(url){
            var urlArr = url.split('?');
            var k = urlArr[0], appU = k.split('/');
            var L = appU[appU.length - 1];
            return L
        },
        fileOrBlobToDataURL(obj, cb){
            var a = new FileReader();
            a.readAsDataURL(obj);
            a.onload = function (e){
                cb(e.target.result);
            };
        },
        handleUpload (file) {
            this.file = file;
            this.fileOrBlobToDataURL(file,e=>{
                this.thisfile=e
            })
            return false;
        },
        edit(e,index){
            this.thisindex=index
            this.file=null
            this.formInline=JSON.parse(JSON.stringify(e))
            // this.formInline.link_url=e.link_url
            this.editmodal=true
            this.thisfile=e.image_url
        },
        addimg(){
            this.addformInline={
                tit_name: '',
                link_url: '',
                description:''
            }
            this.thisfile=''
            this.file=null
            this.addmodal=true
        },
        addok(){
            let form = new FormData();
            form.append("description", this.addformInline.description);
            form.append("link_url", this.addformInline.link_url);
            form.append("tit_name", this.addformInline.tit_name);
            form.append("up_file", this.file);
            this.$api.repeater(this,'addSlides',form).then(res=>{
                if(res.success==true){
                    this.data.push(res.data)
                    this.$Notice.success({
                        title: '添加成功',
                    });
                }else{
                    this.$Notice.error({
                        title: '添加失败',
                        desc: res.error
                    });
                }
            })
        },
        editok(){
            let form = new FormData();
            
                if(this.formInline.description!==this.data[this.thisindex].description){
                    form.append("description", this.formInline.description);
                }
                if(this.formInline.link_url!==this.data[this.thisindex].link_url){
                    form.append("link_url", this.formInline.link_url);
                }
                if(this.formInline.tit_name!==this.data[this.thisindex].tit_name){
                    form.append("tit_name", this.formInline.tit_name);
                }
                if(this.file!==null){
                    form.append("up_file", this.file);
                }
                form.append("id", this.formInline.id);
                form.append("version", this.formInline.version);

                this.$api.repeater(this,'setSlides',form).then(res=>{
                    if(res.success==true){
                        if(this.formInline.description!==this.data[this.thisindex].description){
                            this.data[this.thisindex].description=res.data.description
                        }
                        if(this.formInline.link_url!==this.data[this.thisindex].link_url){
                            this.data[this.thisindex].link_url=res.data.link_url
                        }
                        if(this.formInline.tit_name!==this.data[this.thisindex].tit_name){
                            this.data[this.thisindex].tit_name=res.data.tit_name
                        }
                        if(this.file!==null){
                            this.data[this.thisindex].image_url=res.data.image_url
                        }
                        this.data[this.thisindex].version=res.data.version
                        this.$Notice.success({
                            title: '修改成功',
                        });
                    }else{
                        this.$Notice.error({
                            title: '修改失败',
                            desc: res.error
                        });
                    }
                })
        },
        editcancel(){

        },
        delSlides(k,i){
            this.$api.repeater(this,'delSlides',{id:k.id}).then(res=>{
                if(res.success==true){
                    this.data.splice(i,1);
                    this.$Notice.success({
                        title: '删除成功'
                    });
                }else{
                    this.$Notice.error({
                        title: '删除失败',
                        desc: res.error
                    });
                }
            })
        },
        getSlides(){
            this.$api.repeater(this,'getSlides').then(res=>{
                if(res.data==null){
                    this.data=[]
                }else{
                    this.data=res.data
                }
            })
            // this.$api.getSlides().then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.data==null){
            //             this.data=[]
            //         }else{
            //             this.data=responseJson.data
            //         }
            //     })
            // })
        }
    },
    mounted (){
        this.init()
    }
};
</script>
